<template>
	<view>
		<!-- 色块 -->
		<view class="colorBlock">
			
		</view>
		
		<!-- 卡片 -->
		<view class="GoodsCard">
			<view class="inp" >
				<view type="text"
				style="width: 310rpx;height: 64rpx;margin-top: 419rpx;text-align: center;border-bottom: 1rpx solid #ccc;">
					{{str}}
				</view>
			</view>
			<view class="" style="margin-top: 24rpx;margin-bottom: 52rpx;color: #ccc;font-size: 24rpx;">
				已绑定手机号
			</view>
			<button @tap="update"
			style="width: 310rpx;height: 64rpx;border-radius: 32rpx;background-color: #FFA400;color: white;line-height: 64rpx;font-size: 28rpx;"
			>换绑手机号</button>
		</view>
		
		<!-- <button class="btn">退出登录</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				str:'13344445555'
			}
		},
		methods: {
			update(){
				uni.navigateTo({
					url:'/pages/my/Setup/information/setTel/setTel'
				})
			},
			clear(){
				console.log(12);
				this.str=''
			}
		},
		computed:{
			count(){
				return this.str.length
			}
		}
	}
</script>

<style>
page{
	background-color: #F7F7F7;
}	

.colorBlock{
	width: 100%;
	height: 50rpx;
	background-color: #FFA400;
	position: absolute;
	z-index: -1;
}

.GoodsCard{
	width: 100%;
	height: 100vh;
	background-color: white;
	border-radius: 34rpx;
	padding-left: 32rpx;
	padding-right: 32rpx;
	box-sizing: border-box;
	/* line-height: 240rpx; */
	/* display: flex; */
	margin-bottom: 30rpx;
	text-align: center;
}

.box{
	padding-top: 58rpx;
	padding-bottom: 63rpx;
	border-bottom: 1rpx solid #ccc;
	margin-bottom: 58rpx;
}

.box2{
	/* padding-top: 58rpx; */
	padding-bottom: 63rpx;
	border-bottom: 1rpx solid #ccc;
	margin-bottom: 58rpx;
}

.btn{
	position: absolute;
	bottom: 30rpx;
	left: 30rpx;
	width: 689rpx;
	height: 80rpx;
	background-color: #FFA400;
	color: white;
}

.cs{
	width: 30rpx;
	height: 30rpx;
	/* margin-top: 17rpx; */
	margin-top: 436rpx;
}

.inp{
	width: 100%;
	display: flex;
	justify-content: center;
}
</style>
